﻿
@using AwesomeSlider.Extensions;
@using Orchard.ContentManagement;
@using AwesomeSlider.Models;
@using Orchard.DisplayManagement.Shapes;
@using Orchard.Core.Routable.Models;
@{
    Script.Require("Slides");
    Style.Require("SlidesCSS");
    var list = Model.ContentItems;
    var items = list.Items;
    List<SliderItemPart> sliderItemList= new List<SliderItemPart>();
    var currentindex = 0;
}


<br />
<br />
@if (items.Count > 0)
{
<div id="rotatescroll">
    <div class="viewport">
        <ul class="overview">
            @foreach (var item in items)
            {
                ContentItem content = item.ContentItem;
                var sliderPart = content.As<SliderItemPart>();
                sliderItemList.Add(sliderPart);
                <li><img style="margin-top:20px" src="@Url.Thumb(sliderPart.Id, 280, 280)" alt="@sliderPart.Name" /></li>
            }
        </ul>
    </div>
    <div class="dot"></div>
    <div class="overlay">
    </div>
    <div class="thumb"></div>
    <div class="summary" style="text-align:center">
        @foreach (var item in sliderItemList)
        {
            <div id="@currentindex">
                <p>@item.Description</p>
            </div>
            ++currentindex;
        }
    </div>
</div>
}


@using (Script.Foot())
{
    <script type="text/javascript">
        $(document).ready(function () {
            $('#rotatescroll').tinycircleslider({radius: 140,snaptodots: true, callback: function (element, index) {
                for (i = 0; i <= @currentindex; i++) {
                    if (i == index) {
                        $("#" + i).show();
                    }
                    else {
                        $("#" + i).hide();
                    }
                }
            }
            });
        });
    </script>
    
    
}




